<template>
  <div>
   <Body class="body"></Body>
   <transition name="fade">
   <Window v-if="mainStore.showPop" class="window"></Window>
   </transition>
  </div>
</template>

<script>
import Body from './components/body/index.vue'
import Main from './components/body/main.vue'
import Window from './components/window/index.vue'
import { useMainStore } from './pinia/index.js'
export default {
 setup(){
  const mainStore = useMainStore()
  return{
    mainStore
  }
 },
 components:{Body,Window}
}
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
.window{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
}
</style>